<template>
  <div class="app-container">
    <common-table
      :has-new="false"
      :has-delete="false"
      :has-modify="false"
      :colnames="colnames"
      :list-data="listData"
      :list-loading="listLoading"
      :is-multiple="isMultiSelect"
      :custom-buttons="customButtons"
      @fetchData="fetchData"
      @itemNew="itemNew"
      @itemEdit="itemEdit"
      @itemDelete="itemDelete"
      @onCustomButtonClick="onCustomButtonClick"
    >
      <template v-slot:rightPannel>
        <el-input v-model="listQuery.opName" placeholder="请选择异常类型" clearable class="etag" size="mini" />
        <el-button type="primary" size="mini" class="ml5" @click="fetchData(listQuery)">查询</el-button>
        <el-button type="default" size="mini" class="ml5" @click="exportData(listQuery)">导出</el-button>
      </template>
    </common-table>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="40%"
      destroy-on-close
    >
      <price-edit
        :values="editValues"
        :readonly="!hasModify"
        @onCancel="dialogVisible = false"
        @onSubmit="onSubmit"
      />
    </el-dialog>

  </div>
</template>

<style scoped>
.etag {
  width: 220px;
  margin-right: 5px;
}
</style>

<script>
import { mapGetters } from 'vuex'
import CommonTable from '../commontable'
import PriceEdit from './edit'
import { getPriceList, delPrice, addPrice, putPrice } from '@/api/price'
import apiDefines from '../commontable/apidefines'
import { batchDel } from '@/utils'

export default {
  name: 'PriceLog',
  components: { CommonTable, PriceEdit },
  data() {
    return {
      customButtons: [
        // { name: '峰谷价', type: 'primary', data: { priceType: 2 }},
        // { name: '查看引用', type: 'default', isMultiSelect: false, data: {}}
      ],
      colnames: [
        // { displayName: '序号', colName: 'id', colWidth: '64px' },
        { displayName: '故障类型', colName: 'errType', colWidth: '100px' },
        { displayName: '设备类型', colName: 'devType', colWidth: '100px' },
        { displayName: 'IMEI编号', colName: 'devIMEI', colWidth: '120px' },
        { displayName: '所属地市', colName: 'stationAddrCity', colWidth: '100px' },
        { displayName: '所属场站', colName: 'stationName', colWidth: '120px' },
        { displayName: '上报时间', colName: 'errDate', colWidth: '120px' },
        { displayName: '关联工单ID', colName: 'workId', colWidth: '120px' },
        { displayName: '异常备注', colName: 'remark', colWidth: '0' }
      ],
      editCols: {},
      editType: 'edit',
      editValues: {},
      listData: {},
      editRules: {},
      listLoading: false,
      isMultiSelect: true,
      dialogVisible: false,
      dialogTitle: '新建',
      stationName: '全部价格牌模板',
      listQuery: {},
      hasModify: false
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'name',
      'avatar',
      'roles'
    ])
  },
  created() {
    this.editCols = apiDefines.price.editCols
    this.editRules = apiDefines.price.editRules
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$route.params.stationName) {
        this.stationName = this.$route.params.stationName + ' 车位'
      }
    })
  },
  methods: {
    fetchData(listQuery) {
      this.listQuery = listQuery
      console.log('fetchData', listQuery)
      this.listLoading = true
      getPriceList(listQuery, this.$route.params.stationId)
        .then(ret => {
          console.log('ret', ret)
          this.listData = ret.data
        }).finally(() => {
          this.listLoading = false
        })
    },
    itemNew() {
      console.log('price New')
      this.editType = 'add'
      this.dialogTitle = '新建一口价'
      this.editValues = { priceType: 1 }
      this.dialogVisible = true
      this.hasModify = true
    },
    itemEdit({ type, item, items }) {
      console.log('itemEdit')
      this.editType = 'edit'
      this.editValues = item
      this.dialogTitle = '修改'
      this.dialogVisible = true
      this.hasModify = false
    },
    itemDelete({ type, item, items }) {
      console.log('itemDelete')
      if (type === 'one') {
        delPrice({ priceId: item.id }).then(ret => {
          this.$message({
            type: 'success',
            message: '删除成功！'
          })
          this.fetchData(this.listQuery)
        })
      } else if (type === 'multi') {
        batchDel(delPrice, items, { idname: 'priceId', idvalue: 'id' }).then(ret => {
          this.$message({
            type: 'success',
            message: '删除成功！'
          })
          this.fetchData(this.listQuery)
        })
      }
    },
    onSubmit(formData) {
      console.log('onSubmit', formData)
      if (this.editType === 'add') {
        // 新建
        addPrice(formData).then((ret) => {
          console.log('add ret', ret)
          this.$message({
            type: 'success',
            message: '添加成功！'
          })
          this.dialogVisible = false
          this.fetchData(this.listQuery)
        })
      } else if (this.hasModify) {
        // 修改
        putPrice(formData).then((ret) => {
          console.log('edit ret', ret)
          this.$message({
            type: 'success',
            message: '修改成功！'
          })
          this.dialogVisible = false
          this.fetchData(this.listQuery)
        })
      } else {
        this.dialogVisible = false
      }
    },
    onCustomButtonClick({ target, data }) {
      if (target.name === '峰谷价') {
        this.editType = 'add'
        this.dialogTitle = '新建峰谷价'
        this.editValues = target.data
        this.dialogVisible = true
        this.hasModify = true
      } else if (target.name === '查看引用') {
        // console.log('查看引用', data)
        this.$router.push({
          name: 'Etag',
          params: {
            query: {
              queryType: 1, // 0，false）：根据所传列名和数值模糊查询；（1，true): 精确查询
              query: `${data.item.id}`, // 搜索内容
              queryColumn: 'templateId', // 搜索列名，即字段名，如：devName, stationName等
              order: 'ascending', // 排序，取值：ascending/descending/none(不传Order参数)
              column: 'templateId', // 排序列名，即字段名，如：devName, stationName等
              curPage: 1, // 当前页
              pageSize: 20 // 页大小
            }
          }
        })
      }
    },
    exportData(listQuery) {
      this.$message({
        type: 'warning',
        message: '缺少接口'
      })
    }
  }
}
</script>
